<template>
  <div class="order-form">
    <van-form @submit="onSubmit" ref="formRef">
      <!-- 创建人 -->
      <van-field
        label="创建人"
        placeholder="请输入创建人姓名"
        :value="formData.createBy"
        required
        readonly
        disabled
        :rules="[{ required: true }]"
      />
      <!-- 创建时间 -->
      <van-field
        label="创建时间"
        disabled
        placeholder="请选择创建时间"
        :value="formData.createTime"
        required
        readonly
        :rules="[{ required: true }]"
      />

      <!-- 工单类型 -->
      <van-field
        label="工单类型"
        :value="formData.type"
        is-link
        disabled
        required
        readonly
        placeholder="请选择工单类型"
        @click="showTypePicker = false"
        :rules="[{ required: true }]"
      />
      <van-popup v-model:show="showTypePicker" position="bottom">
        <van-picker
          :columns="typeOptions"
          show-toolbar
          title="选择工单类型"
          disabled
          @change="onChange"
          @cancel="showTypePicker = false"
        />
      </van-popup>

      <!-- 工单内容 -->
      <van-field
        name="content"
        type="textarea"
        v-model="formData.content"
        rows="2"
        required
        disabled
        placeholder="请输入工单内容"
        label="工单内容"
        :rules="[{ required: true }]"
      >
      </van-field>

      <!-- processingFeedback -->
      <van-field
        name="processingFeedback"
        type="textarea"
        v-model="formData.processingFeedback"
        rows="2"
        required
        placeholder="请输入处理反馈"
        label="处理反馈"
        :rules="[{ required: true }]"
      ></van-field>

      <!-- 核实处理状态 -->
      <van-field
        label="处理状态"
        placeholder="请选择处理状态"
        required
        @click="showStatusPicker = true"
        :value="formData.verificationStatus"
        :rules="[{ required: true }]"
      >
      </van-field>
      <van-popup v-model:show="showStatusPicker" position="bottom">
        <van-picker
          :columns="statusOptions"
          show-toolbar
          title="请选择处理状态"
          @change="onChangeStatus"
          @cancel="showStatusPicker = false"
        />
      </van-popup>

      <!-- 提交按钮 -->
      <!-- <div class="button-group">
        <van-button type="default" @click.stop="close">取消</van-button>
        <van-button type="primary" native-type="submit">提交</van-button>
      </div> -->
    </van-form>
  </div>
</template>

<script>
export default {
  props: {
    updateOrderDeatil: {
      type: Object,
      default: {}
    }
  },
  data() {
    const now = new Date();
    return {
      showTypePicker: false,
      selectedType: "",
      type: "",
      showStatusPicker: false,
      typeOptions: [
        { text: "巡检工单", value: "1" },
        { text: "维护工单", value: "2" },
        { text: "紧急维修", value: "3" }
      ],
      statusOptions: [
        { text: "待处理", value: "1" },
        { text: "处理中", value: "2" },
        { text: "已处理", value: "3" },
        { text: "未知状态", value: "4" }
      ],
      formData: {
        content: "",
        createBy: "",
        createTime: "",
        type: "",
        processingFeedback: "",
        processor: "",
        verificationStatus: "",
        updateTime: "",
        updater: "",
        message: "",
        type: ""
      },
      showAssignTimePopup: false,
      assignDateTime: new Date(),
      showProcessTimePopup: false,
      processDateTime: new Date(),
      sourceOptions: [
        { value: "system", text: "系统生成" },
        { value: "app", text: "App上报" }
      ]
    };
  },
  watch: {
    updateOrderDeatil: {
      handler(v, o) {
        this.formData = { ...v };
      },
      deep: true, // 深度监听，对象/数组内部变化也能捕获
      immediate: true // 初始化时立即触发一次监听器
    }
  },

  methods: {
    // 更新工单操作
    updataOrder() {
      this.baseService
        .post("/parking/inspectionWorkOrderDispatch/edit", this.formData)
        .then(res => {
          if (res.code == 200) {
            this.$emit("updateSuccess");
            this.$message.success("更新工单成功");
          } else {
            this.$message.error("更新工单失败");
          }
        });
    },
    getCurrentTime() {
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      var hour = date.getHours();
      var minute = date.getMinutes();
      var second = date.getSeconds();
      return (
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hour +
        ":" +
        minute +
        ":" +
        second
      );
    },
    onChangeStatus(picker, value, index) {
      this.formData.verificationStatus = value.value;
      this.showStatusPicker = false;
    },
    onChange(picker, value, index) {
      //   this.selectedType = value.value;
      //   this.formData.type = value.value;
      this.showTypePicker = false;
    },
    onTypeConfirm(value) {},

    close() {
      this.$emit("close");
    },
    generateId() {
      return "WO-" + Math.floor(Math.random() * 1000000);
    },
    formatDate(date) {
      const year = date.getFullYear();
      const month = date.getMonth() + 1; // 月份从 0 开始
      const day = date.getDate();
      const hours = date.getHours();
      const minutes = date.getMinutes();
      const seconds = date.getSeconds();
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },

    onSubmit(values) {
      this.formData.updateTime = this.formData.assignTime;
      this.baseService
        .post("/parking/inspectionWorkOrderDispatch/add", this.formData)
        .then(res => {
          if (res.code == 200) {
            this.$toast.success("提交成功");
            this.close();
          } else {
            this.$toast.fail(res.message);
          }
        });
    }
  }
};
</script>

<style lang="less" scoped>
.order-form {
  padding: 16px;
}
.van-cell__value__wrapper {
  display: flex;
  align-items: center;
}

.button-group {
  display: flex;
  justify-content: space-between; /* 水平分布 */
  align-items: center; /* 垂直居中 */
  padding: 16px;
  background-color: #fff;
  border-radius: 10px;
  .van-button {
    flex: 1;
    margin: 0 8px;
    text-align: center;
  }
  .van-button--default {
    background-color: #f39c12; /* 取消按钮为黄色 */
    color: #fff;
  }

  .van-button--primary {
    background-color: #409eff; /* 确定按钮为蓝色 */
    color: #fff;
  }
}
:deep(.van-field--textarea .van-field__control) {
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 8px 12px;
}
</style>
